{% load cache %}
{% load blog_tags static %}

<!--个人空间-->
<div class="card border-0 rounded-0 px-3 mb-2 mb-md-3 d-none d-lg-block" id="home-card">
    <div class="card-header bg-white px-0">
        <strong><i class="fa fa-paper-plane mr-2 f-17"></i>个人空间</strong>
        <img class="float-right" id="theme-img"
             src="{% if request.COOKIES.toggleTheme == 'dark' %}{% static 'blog/img/toggle-dark.png' %}{% else %}{% static 'blog/img/toggle-light.png' %}{% endif %}"
             alt="theme-toggle" title="切换主题">
    </div>
    <div class="card-body px-0 pt-3 pb-1">
        <div class="row text-center">
            <div class="col">
                <a href="{{ my_github }}" target="_blank" title="进入博主的Github查看博客源码">
                    <img style="max-width:40px" alt="博主的github" src="{% static 'blog/img/github.png' %}">
                    <p class="mt-2">Github</p>
                </a>
            </div>
            <div class="col">
                <a href="{% url 'blog:timeline'%}" target="_blank" title="查看网站建站历程">
                    <img style="max-width:40px" alt="网站的建站历程" src="{% static 'blog/img/blog.png' %}">
                    <p class="mt-2">Timeline</p>
                </a>
            </div>
            <div class="col">
                <a href="{% url 'rss'%}" target="_blank" title="订阅博客">
                    <img style="max-width:40px" alt="订阅博客RSS" src="{% static 'blog/img/rss.png' %}">
                    <p class="mt-2">RSS订阅</p>
                </a>
            </div>
        </div>
    </div>
</div>
<!--文章分类-->
<div class="card border-0 rounded-0 px-3 mb-2 mb-md-3" id="category-card">
    <div class="card-header bg-white px-0">
        <strong><i class="fa fa-book mr-2 f-17"></i>文章分类</strong>
    </div>
    {% get_category_list as categories %}
    <ul class="list-group list-group-flush f-16">
        {% for each in categories %}
        <li class="list-group-item d-flex justify-content-between align-items-center pr-2 py-2">
            <a class="category-item" href="{{ each.get_absolute_url }}"
               title="查看【{{ each.name }}】分类下所有文章">{{ each.name }}</a>
            <span class="badge text-center" title="当前分类下有{{ each.total_num }}篇文章">{{ each.total_num }}</span>
        </li>
        {% endfor %}
    </ul>
</div>
<!--标签云-->
<div class="card border-0 rounded-0 px-3 mb-2 mb-md-3" id="tag-card">
    <div class="card-header bg-white px-0">
        <strong><i class="fa fa-tags mr-2 f-17"></i>标&nbsp;签&nbsp;云</strong>
    </div>
    <div class="card-body px-0 py-3">
        <div class="tag-cloud">
            {% get_tag_list as tag_list %}
            {% for tag in tag_list %}
            <a href="{{ tag.get_absolute_url }}" class="tags f-16" id="tag-{{ forloop.counter }}"
               title="【{{ tag.name }}】标签下有{{ tag.total_num }}篇文章">{{ tag.name }}</a>
            {% endfor %}
        </div>
    </div>
</div>
<!--友链-->
<div class="d-none d-lg-block">
    <div class="card border-0 rounded-0 px-3 mb-2 mb-md-3" id="friends-card">
        <div class="card-header bg-white px-0">
            <strong><i class="fa fa-link mr-2 f-17"></i>友情链接</strong>
        </div>
        <div class="card-body px-0 py-3">
            <div class="tool-list">
                {% get_friends as friends %}
                {% for friend in friends %}
                <div class="w-50 float-left text-center mb-2">
                    <div class="mx-2">
                        <a href="{{ friend.link }}" title="{{ friend.description }}" target="_blank">
                            {{ friend.name }}</a>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>